<d-layout>
  <d-aside>
    <ul>
      <li><a routerLink="/first">主项目 First Component</a></li>
      <li><a routerLink="/second">主项目 Second Component</a></li>
      <!-- <li><a routerLink="/app-angular7-hash/">angular7-hash项目 first 页面</a></li> -->
      <!-- <li><a routerLink="/app-angular7-hash/#/second">angular7-hash项目 second 页面</a></li> -->
      <li><a routerLink="/app-angular7-history/first">angular7-history项目 first 页面</a></li>
      <li><a routerLink="/app-angular7-history/second">angular7-history项目 second 页面</a></li>
      <!-- <li><a routerLink="/app-angular9-hash/#/first">angular9-hash项目 first 页面</a></li> -->
      <!-- <li><a routerLink="/app-angular9-hash/#/second">angular9-hash项目 second 页面</a></li> -->
      <li><a routerLink="/app-angular9-history/first">angular9-history项目 first 页面</a></li>
      <li><a routerLink="/app-angular9-history/second">angular9-history项目 second 页面</a></li>
      <li><a routerLink="/app-jquery">jquery项目</a></li>
      <li><a (click)="goToPage('/app-react16-hash/#/home')">react16-hash项目 home 页面</a></li>
      <li><a (click)="goToPage('/app-react16-hash/#/about')">react16-hash项目 about 页面</a></li>
      <li><a routerLink="/app-react16-history/home">react16-history项目 home 页面</a></li>
      <li><a routerLink="/app-react16-history/about">react16-history项目 about 页面</a></li>
      <li><a (click)="goToPage('/app-vue2-hash/#/home')">vue2-hash项目 home 页面</a></li>
      <li><a (click)="goToPage('/app-vue2-hash/#/about')">vue2-hash项目 about 页面</a></li>
      <li><a routerLink="/app-vue2-history/home">vue2-history项目 home 页面</a></li>
      <li><a routerLink="/app-vue2-history/about">vue2-history项目 about 页面</a></li>
      <li><a (click)="goToPage('/app-vue3-hash/#/home')">vue3-hash项目 home 页面</a></li>
      <li><a (click)="goToPage('/app-vue3-hash/#/about')">vue3-hash项目 about 页面</a></li>
      <li><a routerLink="/app-vue3-history/home">vue3-history项目 home 页面</a></li>
      <li><a routerLink="/app-vue3-history/about">vue3-history项目 about 页面</a></li>
    </ul>
  </d-aside>
  <d-content class="main-content">
    <div id="container"></div>
    <router-outlet></router-outlet>
  </d-content>
</d-layout>

<style>
.d-layout-aside {
  height: 100vh;
}
.d-aside {
  border-right: 1px solid #ccc;
  height: 100vh;
  width: 300px;
  overflow: auto;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.d-aside li{
  font-size: 14px;
  color: #303133;
  padding: 0 20px;
  list-style: none;
  height: 40px;
  line-height: 40px;
}
.main-content{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>